<template>
  <div>
    <div class="container-setting">
      <div>子容器数:</div>
      <el-input v-model="number" :max="5" :min="1" type="number" :disabled="disabled" @input="onInput"></el-input>
    </div>
    <div class="container-setting">
      <div>容器比例:</div>
      <div style="padding: 0 10px" v-for="(item,index) in proportions" :key="index">
        <span>容器 {{ index + 1 }}:</span>
        <span>{{ item * 100 }} % </span>
      </div>
    </div>
    <div class="container-tabset" v-if="specialTabs">
      <div class="tabset-list" v-for="(item,index) in specialTabs" :key="index">
        <div class="set-title">专项tab设置</div>
        <div class="taboptions">
          <el-input v-model="item.title" @input="onSpecialNameInput"></el-input>
          <i class="el-icon-delete" @click="deleteSpecialInput(index)"></i>
        </div>
        <div class="imag">
          <img src="../../../assets/images/add.png" @click="showUpload(index)" alt draggable="false" v-if="!item.icon" />
          <img :src="item.icon" @click="showUpload(index)" alt="" draggable="false" />
        </div>
        <div class="tabbset" style="padding:10px 0">
          <div class="set-title">tab 设置</div>
          <div class="taboptions" v-for="(ite,ind) in item.tabs" :key="ind">
            <el-input v-model="ite.text" @input="onNameInput($event,index)"></el-input>
            <i class="el-icon-delete" @click="deleteinput(index,ind)"></i>
          </div>
        </div>
        <el-button type="primary" @click="addTabs(index)">添加选项卡</el-button>
      </div>
      <el-button type="success" @click="addSpecialTabs">
        添加专项内容
      </el-button>
    </div>
    <!-- <div class="container-tabset" v-if="tabs && tabs.length > 0">
      <div style="padding:30px 0">tab 设置</div>
      <div v-if="tabs && tabs.length > 0">
        <div class="taboptions" v-for="(item,index) in tabs" :key="index">
          <el-input v-model="item.text" @input="onNameInput"></el-input>
          <i class="el-icon-delete" @click="deleteinput(index)"></i>
        </div>
      </div>
      <el-button v-if="tabs && tabs.length > 0" type="primary" @click="addTabs">添加选项卡</el-button>
    </div> -->
    <!-- 上传图片 -->
    <uploadimg ref="upload" @uploadInformation="uploadInformation" />
  </div>
</template>

<script>
import { ref, defineComponent, getCurrentInstance, watch, watchEffect } from 'vue';
import uploadimg from "../../../components/uploadImg"; // 图片上传
export default defineComponent({
  components: { 
    uploadimg
  },
  props: {
    datas: {
      type: Object
    }
  },
  setup (props, { emit }) {
    const aa = ref(props.datas);
    const disabled = ref(false);
    const tabName = ref('');
    const proportions = ref([1]);
    const tabs = ref([]);
    const specialTabs = ref([]);
    const number = ref(2);
    const inputNumber = ref(1);
    const changeIndex = ref(0);
    const vue = getCurrentInstance();
    watchEffect(() =>  {
      if (props.datas && props.datas.containerType) {
        disabled.value = props.datas.containerType !== 2;
        number.value = props.datas.containerNumber;
        proportions.value = props.datas.proportions;
        tabs.value = props.datas.tabs;
        specialTabs.value = props.datas.specialTabs;
        aa.value = props.datas;
      }
    });
    const onInput = (val) => {
      aa.value.containerNumber = Number(val);
      aa.value.setStyle = undefined;
      if (props.datas.containerType === 2){
        const arr = [];
        for (let index = 0; index < val; index++) {
          arr.push(Number(1/val).toFixed(2));
        }
        proportions.value = arr;
        aa.value.proportions = proportions.value;
        console.log('proportions.value', proportions.value);
      }
      emit('updateList', aa.value, Number(val));
      emit('update:datas', aa.value);
    }
    const onNameInput = (val,index) => {
      console.log('val-----', val,index);
      emit('updateList', 'edit', index);
    }
    const onSpecialNameInput = (val) => {
      emit('updateList', 'spedit');
    }
    // 添加专项内容选项
    const addSpecialTabs = () => {
      console.log(specialTabs.value.length);
      if (specialTabs.value.length === 1) {
        inputNumber.value = 1;
      } else {
        inputNumber.value = specialTabs.value.length + 1;
      }
      specialTabs.value.push(
        {
          title: '同步学习',
          name: 'specialTab' + inputNumber.value,
          tabs: [],
          icon: '',
          abstract: {
            component: "specialContainerTab",
            text: "专项容器组件",
            style: "recoment_tab_style1",
            setStyle: {},
            ratio: "1.00"
          }
        }
      )
      inputNumber.value = inputNumber.value + 1;
      emit('updateList', 'special', inputNumber.value);
    }
    // 添加选项卡
    const addTabs = (index) => {
      specialTabs.value[index].tabs.push(
        {
          direction: "0",
          name: "subject" + inputNumber.value,
          ratio: "1",
          text: "学科标题",
          type: "container"
        }
      )
      inputNumber.value = inputNumber.value + 1;
      const tabObj = {
        inputNumber: inputNumber.value,
        index: index
      }
      emit('updateList', 'add', tabObj);
    }
    // 删除选项卡
    const deleteinput = (index,ind) => {
      const deletobj = {
        index: index,
        ind: ind
      }
      specialTabs.value[index].tabs.splice(ind,1);
      emit('updateDataList', deletobj);
    }
    // 删除专项内容选项
    const deleteSpecialInput = (index) => {
      specialTabs.value.splice(index,1);
      emit('deleteDataList', index);
    }
    const showUpload = (index) => {
      changeIndex.value = index;
      vue.proxy.$refs.upload.showUpload();
    }
    const uploadInformation = (res) => {
      const imgObj = {
        url: res,
        index: changeIndex.value
      }
      specialTabs.value[changeIndex.value].icon = res;
      emit('uploadInformation', imgObj);
    }
    return {
      aa,
      number,
      disabled,
      proportions,
      tabs,
      specialTabs,
      tabName,
      changeIndex,
      onInput,
      onNameInput,
      addTabs,
      deleteinput,
      addSpecialTabs,
      onSpecialNameInput,
      deleteSpecialInput,
      showUpload,
      uploadInformation
    }
  }
})
</script>

<style lang="scss">
.container-setting {
  padding: 30px 0;
  display: flex;
  align-items: center;
  div {
    font-weight: 550;
  }
  .el-input {
    width: auto !important;
    margin-left: 16px;
  }
}
.tabset-list{
  padding: 6px 12px;
  margin: 16px 7px;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
  div {
    font-weight: 550;
  }
  .set-title{
    padding: 10px 0 20px 0;
  }
  .taboptions{
    display:flex;
    align-items: center;
    margin-bottom:15px;
  }
  .imag{
    width: 60px;
    height: 60px;
    img{
      width: 100%;
    }
  }
}
</style>